<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>PostMan 模拟工具</title>

    <!-- 引入 Element UI 的 CSS -->
    <link rel="stylesheet" href="css/element-ui.min.css">

    <!-- 引入 Vue 和 Element UI 的 JS -->
    <script src="js/vue.min.js"></script>
    <script src="js/element-ui.min.js"></script>

    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            height: 100vh;
        }

        #app {
            display: flex;
            height: 100%;
        }

        .left-panel {
            width: 30%;
            min-width: 200px;
            padding: 10px;
            overflow: auto;
            border-right: 1px solid #ddd;
        }

        .right-panel {
            flex-grow: 1;
            padding: 10px;
            overflow: auto;
        }

        .splitter {
            cursor: ew-resize;
            width: 10px;
            background-color: #ddd;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 10;
        }

        .splitter .dots {
            writing-mode: vertical-rl;
            transform: rotate(180deg);
            color: #666;
            font-size: 18px;
        }

        h2 {
            margin-bottom: 20px;
            font-size: 18px;
        }

        .el-card {
            margin-bottom: 20px;
        }

        .el-form-item {
            margin-bottom: 15px;
        }

        .request-panel .el-row {
            margin-bottom: 10px;
        }

        .key-value-edit-btn {
            margin-top: 10px;
        }

        .params-headers-key-value {
            display: flex;
            margin-bottom: 10px;
            align-items: center;
        }

        .params-headers-key-value el-input {
            margin-right: 10px;
        }

        .params-headers-key-value button {
            margin-top: 5px;
        }

        .bulk-edit-textarea {
            width: 100%;
            height: 150px;
        }

        .el-tooltip {
            position: relative;
        }

        .input-column {
            display: flex;
            align-items: center;
        }

        .input-column el-input {
            width: 20%;
            margin-right: 10px;
        }

        .value-column {
            width: 40%;
        }

        .add-delete-buttons {
            margin-left: auto;
            display: flex;
            align-items: center;
        }

        .params-headers-key-value button {
            margin-left: 5px;
        }
    </style>
</head>
<body>

<div id="app">
    <!-- 左侧面板 -->
    <div class="left-panel">
        <el-card>
            <h2>访问记录</h2>
            <el-table :data="history" style="width: 100%">
                <el-table-column label="URL" prop="url" width="250"/>
                <el-table-column label="方法" prop="method" width="100"/>
                <el-table-column label="时间" prop="timestamp" width="180"/>
            </el-table>
        </el-card>
    </div>

    <!-- 分割线 -->
    <div class="splitter" @mousedown="startDrag">
        <div class="dots">...</div>
    </div>

    <!-- 右侧面板 -->
    <div class="right-panel">
        <el-card>
            <h2>请求面板</h2>
            <el-form :model="requestData" ref="form" label-width="120px">

                <!-- 请求方法和 URL 放在同一行 -->
                <el-row :gutter="20">
                    <el-col :span="8">
                        <el-form-item label="请求方法">
                            <el-select v-model="requestData.method" placeholder="选择方法">
                                <el-option label="GET" value="GET"></el-option>
                                <el-option label="POST" value="POST"></el-option>
                                <el-option label="PUT" value="PUT"></el-option>
                                <el-option label="DELETE" value="DELETE"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="16">
                        <el-form-item label="URL">
                            <el-input v-model="requestData.url" placeholder="输入请求 URL"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>

                <!-- Tabs 切换 -->
                <el-tabs v-model="activeTab">
                    <el-tab-pane label="Params" name="params">
                        <div v-if="paramsEditMode === 'key-value'">
                            <div v-for="(param, index) in requestData.params" :key="index" class="params-headers-key-value">
                                <div class="input-column">
                                    <el-input v-model="param.key" placeholder="Key"></el-input>
                                    <el-input class="value-column" v-model="param.value" placeholder="Value"></el-input>
                                    <el-tooltip class="item" effect="dark" content="Choose type" placement="top-start">
                                        <el-select v-model="param.type" placeholder="Text">
                                            <el-option label="Text" value="text"></el-option>
                                            <el-option label="File" value="file"></el-option>
                                        </el-select>
                                    </el-tooltip>
                                    <div class="add-delete-buttons">
                                        <el-button icon="el-icon-plus" @click="addParam" size="small"></el-button>
                                        <el-button icon="el-icon-delete" @click="removeParam(index)" size="small"></el-button>
                                    </div>
                                </div>
                            </div>
                            <el-button @click="toggleParamsEditMode" class="key-value-edit-btn">Bulk Edit</el-button>
                        </div>
                        <div v-else>
                            <el-input type="textarea" v-model="bulkParams" placeholder="key=value 格式，多个参数换行"></el-input>
                            <el-button @click="toggleParamsEditMode" class="key-value-edit-btn">Key Value Edit</el-button>
                        </div>
                    </el-tab-pane>

                    <el-tab-pane label="Headers" name="headers">
                        <div v-if="headersEditMode === 'key-value'">
                            <div v-for="(header, index) in requestData.headers" :key="index" class="params-headers-key-value">
                                <div class="input-column">
                                    <el-input v-model="header.key" placeholder="Key"></el-input>
                                    <el-input class="value-column" v-model="header.value" placeholder="Value"></el-input>
                                    <el-tooltip class="item" effect="dark" content="Choose type" placement="top-start">
                                        <el-select v-model="header.type" placeholder="Text">
                                            <el-option label="Text" value="text"></el-option>
                                            <el-option label="File" value="file"></el-option>
                                        </el-select>
                                    </el-tooltip>
                                    <div class="add-delete-buttons">
                                        <el-button icon="el-icon-plus" @click="addHeader" size="small"></el-button>
                                        <el-button icon="el-icon-delete" @click="removeHeader(index)" size="small"></el-button>
                                    </div>
                                </div>
                            </div>
                            <el-button @click="toggleHeadersEditMode" class="key-value-edit-btn">Bulk Edit</el-button>
                        </div>
                        <div v-else>
                            <el-input type="textarea" v-model="bulkHeaders" placeholder="key=value 格式，多个参数换行"></el-input>
                            <el-button @click="toggleHeadersEditMode" class="key-value-edit-btn">Key Value Edit</el-button>
                        </div>
                    </el-tab-pane>

                    <el-tab-pane label="Body" name="body">
                        <el-radio-group v-model="requestData.bodyType">
                            <el-radio label="form-data">form-data</el-radio>
                            <el-radio label="x-www-form-urlencoded">x-www-form-urlencoded</el-radio>
                            <el-radio label="raw-json">raw-json</el-radio>
                            <el-radio label="raw-txt">raw-txt</el-radio>
                            <el-radio label="raw-html">raw-html</el-radio>
                            <el-radio label="raw-xml">raw-xml</el-radio>
                        </el-radio-group>

                        <div v-if="requestData.bodyType === 'form-data' || requestData.bodyType === 'x-www-form-urlencoded'">
                            <div v-for="(body, index) in requestData.body" :key="index" class="params-headers-key-value">
                                <div class="input-column">
                                    <el-input v-model="body.key" placeholder="Key"></el-input>
                                    <el-input class="value-column" v-model="body.value" placeholder="Value"></el-input>
                                    <el-tooltip class="item" effect="dark" content="Choose type" placement="top-start">
                                        <el-select v-model="body.type" placeholder="Text">
                                            <el-option label="Text" value="text"></el-option>
                                            <el-option label="File" value="file"></el-option>
                                        </el-select>
                                    </el-tooltip>
                                    <div class="add-delete-buttons">
                                        <el-button icon="el-icon-plus" @click="addBody" size="small"></el-button>
                                        <el-button icon="el-icon-delete" @click="removeBody(index)" size="small"></el-button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </el-tab-pane>
                </el-tabs>

                <el-form-item>
                    <el-button type="primary" @click="sendRequest">发送请求</el-button>
                </el-form-item>
            </el-form>
        </el-card>

        <div v-if="responseData">
            <h3>响应结果</h3>
            <pre>{{ responseData }}</pre>
        </div>
    </div>
</div>

<script>
    new Vue({
        el: '#app',
        data() {
            return {
                requestData: {
                    method: 'GET',
                    url: '',
                    params: [{ key: '', value: '', type: 'text' }],
                    headers: [{ key: '', value: '', type: 'text' }],
                    bodyType: 'form-data',
                    body: [{ key: '', value: '', type: 'text' }],
                    bodyRaw: ''
                },
                activeTab: 'params',
                paramsEditMode: 'key-value',
                headersEditMode: 'key-value',
                bulkParams: '',
                bulkHeaders: '',
                responseData: null,
                history: [],
            };
        },
        methods: {
            addParam() {
                this.requestData.params.push({ key: '', value: '', type: 'text' });
            },
            removeParam(index) {
                this.requestData.params.splice(index, 1);
            },
            addHeader() {
                this.requestData.headers.push({ key: '', value: '', type: 'text' });
            },
            removeHeader(index) {
                this.requestData.headers.splice(index, 1);
            },
            addBody() {
                this.requestData.body.push({ key: '', value: '', type: 'text' });
            },
            removeBody(index) {
                this.requestData.body.splice(index, 1);
            },
            sendRequest() {
                const timestamp = new Date().toLocaleString();
                this.history.push({
                    url: this.requestData.url,
                    method: this.requestData.method,
                    timestamp: timestamp
                });

                // 发送请求的逻辑
            },
            toggleParamsEditMode() {
                if (this.paramsEditMode === 'key-value') {
                    this.bulkParams = this.requestData.params.map(param => `${param.key}=${param.value}`).join('\n');
                    this.paramsEditMode = 'bulk';
                } else {
                    const paramArray = this.bulkParams.split('\n').map(param => {
                        const [key, value] = param.split('=');
                        return { key, value };
                    });
                    this.requestData.params = paramArray;
                    this.paramsEditMode = 'key-value';
                }
            },
            toggleHeadersEditMode() {
                if (this.headersEditMode === 'key-value') {
                    this.bulkHeaders = this.requestData.headers.map(header => `${header.key}=${header.value}`).join('\n');
                    this.headersEditMode = 'bulk';
                } else {
                    const headerArray = this.bulkHeaders.split('\n').map(header => {
                        const [key, value] = header.split('=');
                        return { key, value };
                    });
                    this.requestData.headers = headerArray;
                    this.headersEditMode = 'key-value';
                }
            },
            startDrag(event) {
                const initialMouseX = event.clientX;
                const initialLeftPanelWidth = this.leftPanelWidth;

                const onMouseMove = (moveEvent) => {
                    const offset = moveEvent.clientX - initialMouseX;
                    const newLeftPanelWidth = Math.max(20, initialLeftPanelWidth + (offset / window.innerWidth) * 100);
                    this.leftPanelWidth = newLeftPanelWidth;
                };

                const onMouseUp = () => {
                    document.removeEventListener('mousemove', onMouseMove);
                    document.removeEventListener('mouseup', onMouseUp);
                };

                document.addEventListener('mousemove', onMouseMove);
                document.addEventListener('mouseup', onMouseUp);
            },
        }
    });
</script>
</body>
</html>
